/*
    创建者：shuxiaokai
    创建时间：2021-09-03 20:45
    模块名称：返回body
    备注：
*/
<template>
    <s-loading :loading="loading" class="body-view" :class="{ vertical: layout === 'vertical' }">
        <template v-if="remoteResponse.data.type">
            <!-- 图片类型 -->
            <el-image
                v-if="remoteResponse.data.type.includes('image/')"
                class="img-view"
                :src="remoteResponse.data.file.url"
                :preview-src-list="[remoteResponse.data.file.url]"
                fit="scale-down"
            >
            </el-image>
            <!-- 音频类型 -->
            <!-- 视频类型 -->
            <!-- 强制下载类型 -->
            <div v-else-if="remoteResponse.data.type.includes('application/octet-stream')">
                <i class="iconicon_weizhiwenjian"></i>
                <s-download :url="remoteResponse.data.file.url" static>
                    <span class="cursor-pointer theme-color">{{ $t("下载") }}</span>
                </s-download>
            </div>
            <div v-else-if="remoteResponse.data.type.includes('application/force-download')">
                <i class="iconicon_weizhiwenjian"></i>
                <s-download :url="remoteResponse.data.file.url" static>
                    <span class="cursor-pointer theme-color">{{ $t("下载") }}</span>
                </s-download>
            </div>
            <!-- excel -->
            <div v-else-if="remoteResponse.data.type.includes('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') || remoteResponse.data.type.includes('application/vnd.ms-excel')">
                <svg class="res-icon" aria-hidden="true" title="Excel">
                    <use xlink:href="#iconexcel"></use>
                </svg>
                <s-download :url="remoteResponse.data.file.url" static>
                    <span class="cursor-pointer theme-color">{{ $t("下载") }}</span>
                </s-download>
            </div>
            <!-- word -->
            <div v-else-if="remoteResponse.data.type.includes('application/vnd.openxmlformats-officedocument.wordprocessingml.document') || remoteResponse.data.type.includes('application/msword')">
                <svg class="res-icon" aria-hidden="true" title="Excel">
                    <use xlink:href="#iconWORD"></use>
                </svg>
                <s-download :url="remoteResponse.data.file.url" static>
                    <span class="cursor-pointer theme-color">{{ $t("下载") }}</span>
                </s-download>
            </div>
            <!-- pdf -->
            <iframe v-else-if="remoteResponse.data.type.includes('application/pdf')" :src="remoteResponse.data.file.url" class="pdf-view"></iframe>
            <!-- xml -->
            <pre v-else-if="remoteResponse.data.type.includes('application/xml')">{{ remoteResponse.data.text }}</pre>
            <!-- javascript -->
            <pre v-else-if="remoteResponse.data.type.includes('application/javascript')">{{ remoteResponse.data.text }}</pre>
            <!-- 请求错误 -->
            <div v-else-if="remoteResponse.data.type.includes('error')">{{ remoteResponse.data.text }}</div>
        </template>
        <div v-show="remoteResponse.data.type.includes('text/html')" class="text-wrap">
            <s-raw-editor
                :model-value="htmlResponse"
                readonly
                type="text/html"
            >
            </s-raw-editor>
        </div>
        <div v-show="remoteResponse.data.type.includes('text/plain')" class="text-wrap">
            <s-raw-editor
                :model-value="textResponse"
                readonly
                type="text/plain"
            >
            </s-raw-editor>
        </div>
        <div v-show="remoteResponse.data.type.includes('application/json')" class="text-wrap">
            <s-raw-editor
                :model-value="jsonResponse"
                readonly
                type="application/json"
            >
            </s-raw-editor>
        </div>
        <el-dropdown v-if="remoteResponse.data.type.includes('application/json')" class="apply-response" trigger="click">
            <span>
                <span>{{ $t("应用为响应值") }}</span>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item v-for="(item, index) in responseApplyEnum" :key="index" @click="handleApplyResponse(item, index)">
                        <span class="mr-1">{{ $t("应用为") }}</span>
                        <span>{{ item.title }}</span>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
        <!-- <div v-show="remoteResponse.data.type.includes('application/json')" class="apply-response">应用为响应值</div> -->
    </s-loading>
</template>

<script lang="ts">
import { defineComponent } from "vue"
import beautify from "js-beautify"
import { ApidocProperty } from "@@/global";
import { apidocConvertJsonDataToParams } from "@/helper/index"

type ResponseApplyEnum = {
    index: number,
    title: string,
    contentType: string,
}

export default defineComponent({
    data() {
        return {
        };
    },
    computed: {
        //远端返回数据结果
        remoteResponse() {
            return this.$store.state["apidoc/response"]
        },
        //发送请求状态
        loading() {
            return this.$store.state["apidoc/response"].loading;
        },
        //布局
        layout() {
            return this.$store.state["apidoc/baseInfo"].layout;
        },
        //json返回参数
        jsonResponse() {
            const data = this.$store.state["apidoc/response"].data.text
            return beautify(data, { indent_size: 4 });
        },
        //HTML返回参数
        htmlResponse() {
            const data = this.$store.state["apidoc/response"].data.text;
            return beautify.html(data, { indent_size: 4 });
        },
        //纯文本返回参数
        textResponse() {
            const data = this.$store.state["apidoc/response"].data.text;
            return data;
        },
        //返回值类型
        responseApplyEnum() {
            return this.$store.state["apidoc/apidoc"].apidoc.item.responseParams.map((v, index) => ({
                index,
                title: v.title,
                contentType: v.value.dataType
            }));
        },
    },
    methods: {
        //美化html文件
        beautifyHtml(str: string) {
            return str;
        },
        //应用为响应值
        handleApplyResponse(item: ResponseApplyEnum, index: number) {
            const convertData = apidocConvertJsonDataToParams(JSON.parse(this.jsonResponse), (p: ApidocProperty) => {
                const mindData = this.$store.state["apidoc/baseInfo"].mindParams.filter(v => v.paramsPosition === "responseParams");
                const matchedData = mindData.find(v => v.key === p.key);
                if (matchedData) {
                    p.description = matchedData.description;
                    p.value = matchedData.value;
                }
                return "";
            });
            this.$store.commit("apidoc/apidoc/changeResponseByIndex", { index, value: convertData })
        },
    },
})
</script>

<style lang="scss">
.body-view {
    width: 100%;
    height: calc(100vh - #{size(370)});
    overflow-y: auto;
    position: relative;
    &.vertical {
        height: 100%;
    }
    .apply-response {
        position: absolute;
        cursor: pointer;
        right: size(15);
        top: size(10);
        z-index: $zIndex-contextmenu;
    }
    .text-wrap {
        height: 100%;
    }
    .operation {
        height: size(30);
        padding: 0 size(20);
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        color: $gray-300;
    }
    .img-view {
        width: size(200);
        height: size(200);
    }
    .pdf-view {
        width: 100%;
        height: size(300);
    }
    .res-icon {
        width: size(200);
        height: size(200);
    }
}
</style>
